<template>
    <Card>
        <p slot="title">技师评价</p>
        <!-- <Tabs :value="tabValue" @on-click="tabClick">
            <TabPane label="全部评论" name="0"></TabPane>
            <TabPane label="待会发评论" name="1"></TabPane>
        </Tabs> -->
        <div class="search-con search-con-top">
            评价信息：
            <Select style="width:100px" v-model="search.search_type">
                <Option value="0">全部</Option>
                <Option value="1">项目名称</Option>
                <Option value="2">技师名称</Option>
                <Option value="3">会员信息</Option>
            </Select>
            <Input placeholder="请输入搜索信息" v-model="search.search" style="width: 200px; margin-left: 10px;"></Input>
            评价等级：
            <Select style="width:200px" v-model="search.level">
                <Option value="0">全部</Option>
                <Option value="1">好评</Option>
                <Option value="2">中评</Option>
                <Option value="3">差评</Option>
            </Select>
            评论时间：
            <DatePicker type="datetime" v-model="search.start_time" style="width: 200px"></DatePicker>
            <span style="margin: 0 3px;">-</span>
            <DatePicker type="datetime" v-model="search.end_time" style="width: 200px"></DatePicker>

            <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getList">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        </div>
        <!-- <Button @click="reset" type="success" style="margin: 10px 0;">删除所选</Button> -->
        <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
            <template slot-scope="{ row , index}" slot="userSlot">
                <div style="display: flex;">
                    <img :src="row.user_avatar" style="width: 60px;height: 60px;" @click="showImg(row.user_avatar)" />
                    <div>
                        <div>会员昵称：{{ row.user_nick }}</div>
                        <div>手机号：{{ row.user_mobile }}</div>
                    </div>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="goodsSlot">
                <div style="display: flex;">
                    <img :src="baseImgeUrl + row.goods_image" style="width: 60px;height: 60px;"
                        @click="showImg(baseImgeUrl + row.goods_image)" />
                    <div>
                        <div>服务名称：{{ row.goods_name }}</div>
                        <div>服务价格：{{ row.goods_price }}</div>
                    </div>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="techSlot">
                <div style="display: flex;">
                    <img :src="baseImgeUrl + row.tech_avatar" style="width: 60px;height: 60px;"
                        @click="showImg(baseImgeUrl + row.tech_avatar)" />
                    <div>
                        <div>技师名称：{{ row.tech_username }}</div>
                        <div>手机号：{{ row.tech_mobile }}</div>
                    </div>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="imgSlot">
                <div @click="showImgDao(row)">
                    <span style="color: blue;font-size: 15px;text-decoration:underline;cursor:pointer;">查看图片</span>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="makeSlot">
                <i-switch @on-change="statusChange(row.id, row.is_del)" :value="!row.is_del" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </template>
        </Table>
        <br>

        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
        </Page>
        <Modal v-model="imgShow" width="330px" :closable="false">
            <img :src="imgShowUrl" style="width: 300px;">
        </Modal>

        <Modal v-model="showPaymentInfo" title="评价图片">
            <p v-for="item in imgArr">
                <img :src="baseImgeUrl + item" style="width: 500px;">
            </p>
        </Modal>
    </Card>
</template>
  
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "technicianEva",
    data() {
        return {
            baseUrl: baseUrl,
            baseImgeUrl: baseImgeUrl,
            // 列表
            columns: [
                {
                    title: '会员信息',
                    key: 'user',
                    align:"center",
                    slot: "userSlot",
                },
                {
                    title: '项目信息',
                    align:"center",
                    key: 'goods',
                    slot: "goodsSlot"
                }, 
                {
                    title: '技师信息',
                    align:"center",
                    key: 'tech',
                    slot: "techSlot"
                }, 
                {
                    title: '评分',
                    align:"center",
                    key: 'score',
                }, 
                {
                    title: '内容',
                    align:"center",
                    key: 'evaluate',
                },
                {
                    title: '评价图片',
                    align:"center",
                    slot: 'imgSlot',
                },
                {
                    title: '评价时间',
                    align:"center",
                    key: 'create_time',
                    width: 150
                },
                {
                    title: '操作',
                    align:"center",
                    slot: 'makeSlot',
                    width: 210
                },
            ],
            // 数据
            list: [],
            total: 0,
            imgShow: false,
            imgShowUrl: '',

            search: {
                page: 1,
                limit: 10
            },

            tabValue: "0",
            showPaymentInfo: false,
            imgArr: [],
        }
    },
    methods: {
        // 查询技师信息
        getList() {
            this.$axios('/admin/tec/techEvaList', this.search).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        searchs() {
            this.search.page = 1;
            this.getList();
        },
        reset() {
            this.search = {
                page: 1,
                limit: 10
            };
            this.getList();
        },
        changePage(page) {
            this.search.page = page;
            this.getList();
        },
        changeSize(size) {
            this.search.limit = size;
            this.getList();
        },
        showImg(url) {
            this.imgShow = true;
            this.imgShowUrl = url;
        },
        // tab切换
        tabClick(name) {
            this.search.type = name;
            this.getList();
        },
        showImgDao(row) {
            this.showPaymentInfo = true;
            this.imgArr = row.img;
        },
        statusChange(id, status) {
            this.$axios('/admin/tec/evaStatusChange', { id: id, status: status }).then(res => {
                this.getList();
            });
        },
    },
    created() {
        this.getList();
    }
}
</script>
<style>
.ivu-table-cell {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  